Eleventy Layout

Layout（布局）是一种特殊模板，用于包括其它内容。

如何使用模板？在内容里指定。

注：模板文件需要统一放置到 src/_includes/layouts 下。

在内容中指定模板

例如下述 Markdown 内容，在元信息里通过 layout 指定，使用指定的模板渲染该内容。markdown 内容如下：

---
layout: mylayout.njk
title: My Rad Markdown Blog Post
---

# {{ title }}

这将在 _includes/mylayout.njk 的 include 文件夹中查找 mylayout.njk Nunjucks 文件。

`mylayout.njk`

mylayout.njk 是一个基于 HTML 的模板：

---
title: My Rad Blog
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
  </head>
  <body>
    {{ content | safe }}
  </body>
</html>

其中：

模板中也包含一个 title 元数据，它会被内容中的 title 替换掉
模板内容中的 content 表示内容，即 Markdown，它会被转换成 HTML 后放入这里
我们不想对输出进行双重转义，因此我们在此处使用提供的 Nunjucks safe 过滤器

最终生成 HTML

最终生成的 HTML 数据：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>My Rad Markdown Blog Post</title>
	</head>
	<body>
		<h1>My Rad Markdown Blog Post</h1>
	</body>
</html>

网络资源

Layouts — Eleventy

本文作者：Maeiee

本文链接：Eleventy Layout

版权声明：如无特别声明，本文即为原创文章，版权归 Maeiee 所有，未经允许不得转载！

喜欢我文章的朋友请随缘打赏，鼓励我创作更多更好的作品！